<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Pie 2D: Smart Label</title>
		<style type="text/css">
			@import "../../../dojo/resources/dojo.css";
			@import "../../../dijit/tests/css/dijitTests.css";
			@import "../../../dijit/themes/claro/claro.css";
			@import "../resources/Legend.css";
		</style>
		<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="parseOnLoad:true, async: true"></script>
		<script type="text/javascript">
			require([
				"dojox/charting/Chart",
				"dojox/charting/plot2d/Pie",
				"dojox/charting/action2d/Tooltip",
				"dojox/charting/themes/Tom",
				"dojox/charting/widget/Legend",
				"dojo/domReady!"
			], function (Chart, Pie, TooltipAction, Tom, Legend) {
				var pieChart = null;
				var legend = null;
				pieChart = new Chart("pieChart");
				pieChart.setTheme(Tom).addPlot("default", {
					type: Pie,
					font: "normal normal 10pt Tahoma",
					fontColor: "#ccc",
					labelWiring: "#ccc",
					labelStyle: "columns",
					htmlLabels: true,
					startAngle: -10
				}).addSeries("Series A", [{
					y: 12.1,
					text: "China",
					tooltip: "1,210 million"
				}, {
					y: 9.52,
					text: "India",
					tooltip: "952 million"
				}, {
					y: 2.66,
					text: "USA",
					tooltip: "266 million"
				}, {
					y: 2.06,
					text: "Indonisia",
					tooltip: "206 million"
				}, {
					y: 1.63,
					text: "Brazil",
					tooltip: "163 million"
				}, {
					y: 1.48,
					text: "Russian",
					tooltip: "148 million"
				}, {
					y: 1.29,
					text: "Pakistan",
					tooltip: "129 million"
				}, {
					y: 1.25,
					text: "Japan",
					tooltip: "125 million"
				}, {
					y: 1.23,
					text: "Bangladesh",
					tooltip: "123 million"
				}, {
					y: 1.04,
					text: "Nigeria",
					tooltip: "104 million"
				}, {
					y: 0.96,
					text: "Mexico",
					tooltip: "96 million"
				}, {
					y: 0.84,
					text: "Germany",
					tooltip: "84 million"
				}, {
					y: 0.74,
					text: "Phillippines",
					tooltip: "74 million"
				}, {
					y: 0.74,
					text: "Viet Nam",
					tooltip: "74 million"
				}, {
					y: 0.66,
					text: "Iran",
					tooltip: "66 million"
				}, {
					y: 0.64,
					text: "Egypt",
					tooltip: "64 million"
				}]);
				var anim_c = new TooltipAction(pieChart, "default");
				pieChart.render();
				legend = new Legend({
					chart: pieChart,
					horizontal: false
				}, "legend");

				refreshChart = function () {
					var newData = [];
					for (var i = 0; i < 16; i++) {
						newData.push(Math.random() * 10);
					}
					newData.sort(function (v1, v2) {
						return v2 - v1
					});
					pieChart.updateSeries("Series A", newData);
					pieChart.render();
					legend.refresh();
				}
			});
		</script>
	</head>
	<body class="claro">
		<h1>Pie 2D: Smart Label</h1>
		<p>Example of Pie chart using smart label:</p>
		<div style="margin:20px">
			<div id="pieChart" style="width: 470px; height: 350px; float:left;">
			</div>
			<div id="legend">
			</div>
		</div>
		<button onclick="refreshChart()">Random Data Test</button>
	</body>
</html>

